<template>
  <section>
    <div class="container">
      <div class="container-title">查询条件</div>
      <div class="container-body pd">
        <el-form
          label-position="right"
          label-width="100px"
          :model="searchForm"
          ref="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="经销商名称：" size="small" prop="name">
                <el-input
                  v-model="searchForm.name"
                  placeholder="请输入经销商名称"
                  prefix-icon="el-icon-search"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex"  justify="center">
            <el-button
              class="is-tableBtn"
              size="small"
              @click="clearForm('searchForm')"
              >清空</el-button>
             <el-button
                class="is-tableBtn"
                type="primary"
                size="small"
                @click="loadDistributor(searchForm)"
                >查询</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="container">
      <div class="container-title">经销商列表</div>
      <div class="container-body pd">
        <el-row>
          <el-button
            type="primary"
            class="btn"
            size="small"
            @click="createNew()"
            >新增经销商</el-button
          >
        </el-row>

        <el-table
          :data="tableData"
          v-loading="loading"
          border
          style="width: 100%"
          size="small"
        >
          <el-table-column prop="name" label="经销商名称" align="center">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                class="btnwarning"
                type="warning"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <!-- 新增经销商弹窗 -->
    <el-dialog
      :title="editID ? '编辑经销商' : '新增经销商'"
      :visible.sync="createdistributorPop"
      width="30%"
      center
    >
      <el-form
        :model="newdistributorForm"
        :rules="newdistributorRule"
        ref="newdistributorForm"
        label-width="100px"
        class="demo-newdistributorForm"
        size="small"
      >
        <el-form-item label="经销商名称" prop="Name">
          <el-input
            v-model="newdistributorForm.Name"
            placeholder="请输入经销商名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="Remarks">
          <el-input
            v-model="newdistributorForm.Remarks"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetFormESC('newdistributorForm')" size="small"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            editID
              ? updatedistributorForm('newdistributorForm')
              : resetForm('newdistributorForm')
          "
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      createdistributorPop: false, // 商品创建弹窗是否展示
      newdistributorForm: {
        name: "",
        remarks: "",
      },
      newdistributorRule: {
        Name: [
          { required: true, message: "请输入经销商名称", trigger: "blur" },
        ],
      },
      editID: "", // 当前编辑id
      tableData: [],
      loading: true,
      searchForm: { name: "" },
    };
  },
  created() {
    this.loadDistributor(this.searchForm);
  },
  methods: {
    clearForm(formName) { // 清空筛选
      this.$refs[formName].resetFields();
    },
    createNew() {
      this.createdistributorPop = true;
      this.newdistributorForm = {
        name: "",
        remarks: "",
      };
    },
    handleEdit(index, row) {
      this.newdistributorForm = {
        Name: row.name,
        Remarks: row.remarks,
      };
      this.editID = row.id;
      this.createdistributorPop = true;
    },
    handleDelete(index, row) {},
    currentPage(page) {
      this.page = page;
      this.loadDistributor(this.searchForm);
    },
    async resetForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 请求案例
          this.editID = "";
          let res = await this.$store.dispatch("postTbDistributor", {
            Name: this[formName].Name,
            Remarks: this[formName].Remarks,
          });
          if (res.success) {
            this.loadDistributor(this.searchForm);
            this.resetFormESC("newdistributorForm");
          }
        } else {
          return false;
        }
      });
    },

    async updatedistributorForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 编辑案例
          let res = await this.$store.dispatch("putTbDistributor", {
            Id: this.editID,
            Name: this[formName].Name,
            Remarks: this[formName].Remarks,
          });
          if (res.success) {
            this.loadDistributor(this.searchForm);
            this.resetFormESC("newdistributorForm");
          }
        } else {
          return false;
        }
      });

      this.editID = "";
    },
    resetFormESC(formName) {
      // 充值表单
      this.createdistributorPop = false;
      this.$refs[formName].resetFields();
    },
    async loadDistributor(searchForm) {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("loadDistributor", {
        name: searchForm.name,
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      }
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btn {
  margin-bottom: $btnHeight;
  color: #ffff;
}
.btnwarning {
  color: $btnwarning;
}
.pageBox {
  padding-top: 10px;
  clear: both;
  .el-pagination {
    float: right;
  }

  .clear {
    clear: both;
  }
}
</style>
